<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style>
        /* 选择含有title1属性的标签 */
        [title1] {
            background: #ff0000;
        }
        /* 选择含有title="cls3"键值对的全部标签 */
        [title = "cls3"] {
            background: #00ff00;
        }
        /* 有点像正则表达式 */
        /* 选择以cls开头的标签 */
        [title^="cls"] {
            background: #0000ff;
        }
        /* 选择属性或者属性值最后面有个1的全部标签 */
        [title$="1"] {
            background: #ff0000;
        }
        /* 模糊搜索属性或者属性值里面含有ls的全部标签 */
        [title*="ls"] {
            background: #00ff00;
        }
        /* 效果如多个class，要选择其中一个含有classpan的属性或者属性值,（过滤空格） IE6不支持（可以应用[class="xx"]的语法用到非ie浏览器上面） */
        [title~="classpan"] {
            background: #fff000;
        }
    </style>
</head>
<body>
    <!-- 自定义属性 -->
    <div title1>001</div>
    <div title1>002</div>
    <div title="cls3">003</div>
    <div title="cls4">004</div>
    <div title="cls5">005</div>
    <span title1>006</span>
    <span title="span1">007</span>
    <span title="span2 classpan">008</span>
</body>
</html>